import React from 'react'
import './category-selector.scss'

import MUtil from 'util/mm.jsx'
const __mm=new MUtil();

import Product from 'service/product-service.jsx'
const __product=new Product();

class CategorySelector extends React.Component{
    constructor(props){
        super(props);
        this.state={
            firstCategoryList:[],
            firstCategoryId:0,
            secondCategoryList:[],
            secondCategoryId:0
        }
    }
    componentDidMount(){
        this.loadFirstCategory();
    }
    componentWillReceiveProps(nextProps){
        let categoryIdChange=this.props.categoryId!==nextProps.categoryId,
            parentCategoryIdChange=this.props.parentCategoryId!==nextProps.parentCategoryId;
        //数据没有发生变化的时候不做处理
        if(!categoryIdChange && !parentCategoryIdChange){
            return;
        }
        //加入只有一级品类
        if(nextProps.parentCategoryId===0){
            this.setState({
                firstCategoryId : nextProps.categoryId
            })
        }else{
            this.setState({
                firstCategoryId : nextProps.parentCategoryId,
                secondCategoryId:nextProps.categoryId
            },()=>{
                parentCategoryIdChange && this.loadSecondCategory();
            })
        }
    }
    //加载一级分类
    loadFirstCategory(){
        __product.getCategorytList().then(res=>{
            this.setState({
                firstCategoryList:res
            });
        },errMsg=>{
            __mm.errorTips(errMsg);
        })
    }
    //加载二级品类
    loadSecondCategory(){
        __product.getCategorytList(this.state.firstCategoryId).then(res=>{
            this.setState({
                secondCategoryList:res
            });
        },errMsg=>{
            __mm.errorTips(errMsg);
        })
    }
    //选择一级品类
    onFirstCategoryChange(e){
        if(this.props.readOnly){
            return;
        }
        let newValue=e.target.value || 0;
        this.setState({
            firstCategoryId:newValue,
            secondCategoryList:[],
            secondCategoryId:0
        },()=>{
            //更新二级品类
            this.loadSecondCategory();
            this.onPropsCategoryChange();
        })
    }
    //选择二级品类
    onSecondCategoryChange(e){
        if(this.props.readOnly){
            return;
        }
        let newValue=e.target.value || 0;
        this.setState({
            secondCategoryId:newValue
        },()=>{
            this.onPropsCategoryChange();
        })
    }
    //传给父组件中的结果
    onPropsCategoryChange(){
        let categoryChangable=typeof this.props.onCategoryChange === 'function';
        if(this.state.secondCategoryId){
            categoryChangable && this.props.onCategoryChange(this.state.secondCategoryId,this.state.firstCategoryId);
        }else{
            categoryChangable && this.props.onCategoryChange(this.state.firstCategoryId,0);
        }
    }
    render(){
        return(
            <div className="col-md-5">
                <select value={this.state.firstCategoryId} className="form-control cate-select" onChange={(e)=>this.onFirstCategoryChange(e)}
                        disabled={this.props.readOnly}>
                    <option value="">请选择一级分类</option>
                    {
                        this.state.firstCategoryList.map(
                            (category,index)=> <option value={category.id} key={index}>{category.name}</option>
                        )
                    }
                </select>
                {
                    this.state.secondCategoryList.length ?
                        (
                            <select value={this.state.secondCategoryId} className="form-control cate-select" onChange={(e)=>this.onSecondCategoryChange(e)}
                                    disabled={this.props.readOnly} >
                                <option value="">请选择二级分类</option>
                                {
                                    this.state.secondCategoryList.map(
                                        (category,index)=> <option value={category.id} key={index}>{category.name}</option>
                                    )
                                }
                            </select>
                        ) : null
                }

            </div>
        )
    }
}

export default CategorySelector;